<template>
	<view>
		<view v-if="tabBarIndex == 0">
			<device-data ref="deviceData" :tabBarHeight="tabBarHeight"></device-data>
		</view>
		<view v-else-if="tabBarIndex == 1">
			<device-stats ref="deviceStats" :tabBarHeight="tabBarHeight"></device-stats>
		</view>
		<view id="tabbar">
			<tabbar-gift-statistics ref="tabbarDeviceStats"></tabbar-gift-statistics>
		</view>
	</view>
</template>

<script>
	import deviceData from './device-data/device-data.vue';
	import deviceStats from './device-stats/device-stats.vue';
	export default {
		components: {
			deviceData,
			deviceStats
		},
		data() {
			return {
				tabBarIndex: 0,
				tabBarHeight: 0
			}
		},
		onLoad() {
			uni.$off("tabbarDeviceStats");
			uni.$on("tabbarDeviceStats",(data) => {
				const index = data.index;
				this.tabBarIndex = index;
				console.log("this.tabBarIndex", this.tabBarIndex)
				this.$nextTick(() => {
					if(this.tabBarIndex == 0){
						let deviceData = this.$refs.deviceData;
						if(deviceData){
							deviceData.Load();	
							setTimeout(() => {
								deviceData.Ready();
							})
						}
					}else if(this.tabBarIndex == 1){
						let deviceStats = this.$refs.deviceStats;
						if(deviceStats){
							deviceStats.Load();
							setTimeout(() => {
								deviceStats.Ready();
							})
						}
					}
					this.getPomHeight();
				})
			})

			this.$nextTick(() => {
				this.$refs.tabbarDeviceStats.Load();
			})
		},
		onReady() {
			if(this.tabBarIndex == 0){
				let deviceData = this.$refs.deviceData;
				console.log("deviceData",deviceData)
				if(deviceData){
					deviceData.Ready();
				}
			}else if(this.tabBarIndex == 1){
				let deviceStats = this.$refs.deviceStats;
				if(deviceStats){
					deviceStats.Ready();
				}
			}
			this.getPomHeight();
		},
		onPullDownRefresh() {
			if(this.tabBarIndex == 0){
				let operationStatsView = this.$refs.operationStatsView;
				if(operationStatsView){
					operationStatsView.PullDownRefresh();
				}
			}else if(this.tabBarIndex == 1){
				let deviceStats = this.$refs.deviceStats;
				if(deviceStats){
					deviceStats.PullDownRefresh();
				}
			}
		},
		
		onReachBottom(){
			console.log("触底");
			let deviceData = this.$refs.deviceData;
			deviceData.ReachBottom();
		},
		methods: {
			//计算高度
			getPomHeight() {
				this.$nextTick(() => {
					setTimeout(() => {
						let query = wx.createSelectorQuery().in(this)
						query.select('#tabbar').boundingClientRect()
						query.exec(res => {
							this.tabBarHeight = res[0].height
							console.log("底部导航栏高度",this.tabBarHeight)
						})
					},1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>
